<template>
    <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div v-if="ak0jbjczikApi.length > 0">
        <van-skeleton title :row="18" />
    </div>
    <div v-else>

        <van-count-down :time="time" style="margin-left: 150px;">
            <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
            </template>
        </van-count-down>
    </div>
    <van-cell-group>
        <van-cell title="订单号" value="2024001" />
        <van-cell title="下单时间" value="2024-06-14 12:00:00" />
        <van-cell title="收件人" value="张三" />
        <van-cell title="地址" value="北京朝阳区" />
        <van-cell title="总金额" value="200.00" />
    </van-cell-group>
<van-button type="primary" size="large" @click="dj">立即支付</van-button>

</template>

<script setup>
import { ref } from 'vue';
import { ak0jbjczikApi } from '@/api/api'
ak0jbjczikApi().then(res => {
    console.log('xq', res);

})
import { useRouter } from 'vue-router';
const router=useRouter()
const dj =()=>{
     router.push('/dd')
}
const time = ref(60 * 30 * 1000);
</script>

<style>
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
}

.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
}
</style>